Inline CSS, bir HTML elementinin stil özelliklerini doğrudan elementin içinde, style özelliği aracılığıyla tanımlama yöntemidir. Bu yöntem, stil bilgilerinin HTML içeriğiyle iç içe geçmesine neden olur. CSS'nin temel amacı olan içerik ve sunumun ayrılması ilkesine aykırı olsa da, bazı durumlarda pratik ve kullanışlı olabilir.
Inline CSS, bir HTML elementinin style attribute'una CSS kurallarını ekleyerek çalışır. Bu kurallar, o elemente özeldir ve sadece o elementin görünümünü etkiler.
Örnek:
<p style="color: blue; font-size: 16px;">Bu bir inline CSS örneğidir.</p>
Bu örnekte, <p> elementinin metin rengi mavi, yazı boyutu ise 16 piksel olarak ayarlanmıştır.
style özelliğini tek tek güncellemek gerekir. Bu, zaman alıcı ve hataya açık bir işlemdir.Inline CSS kullanımı genellikle önerilmez. Ancak, aşağıdaki durumlarda kullanışlı olabilir:
Inline CSS'nin dezavantajlarını ortadan kaldırmak için, aşağıdaki alternatifler tercih edilmelidir:
.css dosyasına yazılır ve HTML belgesine <link> etiketi ile bağlanır. Bu, kod tekrarını önler, bakım kolaylığı sağlar ve web sitesinin performansını artırır.<head> bölümünde <style> etiketi içinde tanımlanır. Harici stil dosyalarına göre daha az tercih edilir, ancak küçük projelerde veya belirli bir sayfanın stilini tanımlamak için kullanılabilir.CSS kurallarının öncelik sırası şu şekildedir (en yüksek öncelikten en düşüğe):
style özelliği)!important kuralı (harici ve gömülü stillerde)<style> )<link> )Basit Bir Örnek:
<h1 style="color: red; text-align: center;">Başlık</h1>
Bu örnekte, <h1> başlığının rengi kırmızı, metin hizalaması ise ortalanmıştır.
JavaScript ile Dinamik Stil Değişikliği:
<button onclick="document.getElementById('myDiv').style.backgroundColor = 'yellow'">Arka Planı Sarı Yap</button>
<div id="myDiv" style="width: 200px; height: 100px; background-color: lightblue;">
Bu bir div elementidir.
</div>
Bu örnekte, butona tıklandığında, myDiv id'li div elementinin arka plan rengi sarı olarak değiştirilir.
Inline CSS, bazı durumlarda pratik olsa da, genellikle önerilen bir yöntem değildir. Web geliştirme projelerinde, harici stil dosyaları veya gömülü stil etiketleri gibi daha iyi alternatifler bulunmaktadır. Bu alternatifler, kodun daha düzenli, bakımı daha kolay ve performansı daha iyi olmasını sağlar. Unutulmamalıdır ki, CSS Mimarisi tasarım prensiplerine uygun bir yaklaşım her zaman daha sürdürülebilir sonuçlar verecektir.